<template>
    <div class="myorder">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                My Order
            </div>
        </div>
        <!-- myOrder菜单栏 -->
        <div class="mo-select">
            <ul class="mo-select-ul">
                <router-link to="/myorder" v-for="item in listTitle" :key="item.id"
                    :class="{ isActive: item.id === $store.state.count }" @click.native="doClick(item)">
                    <li>{{ item.msg }}</li>
                </router-link>
            </ul>
        </div>
        <!-- 订单列表 -->
        <div class="myorder-list" v-for="item in orderList" :key="item.id">
            <div class="myorder-list-top">
                <div class="logo">
                    <img src="../assets/logo.png" alt="">
                </div>
                <span>{{ item.product.name }}</span>
            </div>
            <div class="myorder-list-context">
                <div class="myorder-list-left">
                    <ul class="left">
                        <li>Interest</li>
                        <li>Total service charge</li>
                        <li>Amount Received</li>
                        <li>Repayment amount</li>
                    </ul>
                </div>
                <div class="myorder-list-right">
                    <ul class="right">
                        <li>₹{{ item.product.rateAmount + item.product.serviceAmount }}</li>
                        <li>₹{{ item.product.serviceAmount }}</li>
                        <li>{{ item.product.amount - item.product.rateAmount - item.product.serviceAmount }}</li>
                        <li>{{ item.product.amount }}</li>
                    </ul>
                </div>
            </div>
            <!-- 订单底部按钮 -->
            <div class="myorder-list-bottom" @click="doBtn(item)"
                :class="{ success: item.status === 'LOAN_SUCCESS', error: item.status === 'DENY' || item.status === 'LOAN_FAIL' }">
                <div v-if="item.status === 'PASS' || item.status === 'LOAN_SUCCESS'">Success</div>
                <div v-else-if="item.status === 'DENY' || item.status === 'LOAN_FAIL'">Refuse</div>
                <div v-else>Appl Ying</div>
            </div>
            <!-- 箭头 -->
            <div class="myorder-jiantou">
                <img src="../assets/myorder-jiantou.png" alt="">
            </div>
        </div>
        <!-- 没有商品时展示 -->
        <orderNull v-if="!orderList.length"></orderNull>
    </div>
</template>

<script>
import { getMyorderList } from "../api";
import { jiami, jiemi } from "../utils/aeskey.js";
import orderNull from '../components/orderNull.vue'
export default {
    components: { orderNull },
    name: 'myorder',
    data() {
        return {
            number: this.$store.state.count,
            listTitle: [
                { id: 1, msg: 'All', status: null },
                { id: 2, msg: 'Success', status: 'LOAN_SUCCESS' },
                { id: 3, msg: 'Overdue', status: 'DUNNING' },
                { id: 4, msg: 'Finish', status: 'FINISH' },
            ],
            orderList: [],//订单列表
        }
    },
    methods: {
        //获取订单列表
        async getOrderList(data) {
            const f = {
                query: {
                    status: data,
                    pageNo: 1,
                    pageSize: 10
                }
            }
            const res = await getMyorderList(jiami(f))
            console.log('获取订单参数', f)
            console.log('获取订单列表', jiemi(res.data))
            this.orderList = jiemi(res.data).page.content
            console.log('orderList', this.orderList)
        },
        //切换顶部状态
        doClick(item) {
            this.number = item.id
            this.$store.commit('changeCount', item.id)
            this.getOrderList(item.status)

        },
        //点击底部按钮
        doBtn(item) {
            if (item.status === 'LOAN_SUCCESS' || item.status === 'DUNNING') {
                console.log(item, 'item')
                this.$router.push('/pettycash')
                this.$store.commit('changeOrderId', item.id)
                this.$store.commit('changepayMount', item.product.amount)
                this.$store.commit('changeEndTime', item.expiryTime)
            }

        },
        msg() {
            this.orderList.forEach(item => {
                if (item.status === 'PASS' || item.status === 'LOAN_SUCCESS') {
                    return 'Success'
                } else if (item.status === 'DENY' || item.status === 'LOAN_FAIL') {
                    return 'Refuse'
                } else {
                    return 'Appl Ying'
                }
            })
        }
    },
    created() {
        const res = this.listTitle[this.listTitle.findIndex(item => item.id === this.number)].status
        console.log(res)
        this.getOrderList(res)
    },
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.myorder {
    min-height: (667/@a);
    background-color: #f5f5f5;
    padding-left: (20/@a);
    padding-top: (70/@a);
    padding-bottom: (50/@a);
    box-sizing: border-box;

    // 订单列表
    .myorder-list {
        position: relative;
        width: (330/@a);
        height: (175/@a);
        background-color: #fff;
        border-radius: (15/@a);

        .myorder-jiantou {
            position: absolute;
            bottom: (16/@a);
            right: (20/@a);
            width: (10/@a);
            height: (10/@a);

            img {
                width: 100%;
            }

        }

        .myorder-list-context {
            display: flex;
            margin-top: (11/@a);



            .myorder-list-left {
                width: 50%;
                height: (98/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #808080;
                margin-left: (10/@a);

                li {
                    margin-bottom: (10/@a);
                }
            }

            .myorder-list-right {
                width: 50%;
                text-align: right;
                height: (98/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (14/@a);
                color: #202020;
                margin-right: (10/@a);

                li {
                    margin-bottom: (8/@a);
                }
            }
        }

        .myorder-list-top {
            display: flex;
            margin-top: (12/@a);
            padding-top: (12/@a);

            .logo {
                width: (20/@a);
                height: (20/@a);
                margin-left: (87/@a);
                margin-right: (9/@a);

                img {
                    width: 100%;
                }
            }

            span {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 500;
                font-size: (16/@a);
                color: #202020;
            }
        }

        .myorder-list-bottom {
            text-align: center;
            line-height: (34/@a);
            width: (330/@a);
            height: (34/@a);
            background-color: #bf37ff;
            margin-right: (10/@a);
            border-radius: 0px 0px (15/@a) (15/@a);
        }

        .success {
            background: #7E42FF !important;
        }

        .error {
            background: #F66F6F;
        }
    }

    .mo-select {
        width: (330/@a);
        height: (48/@a);
        background-color: #fff;
        padding-top: (16/@a);
        border-radius: (10/@a);

        .mo-select-ul {

            .isActive {
                color: #7e42ff;

                &::after {
                    content: '';
                    display: inline-block;
                    width: (18/@a);
                    height: (2/@a);
                    background-color: #7e42ff;
                    border-radius: (9/@a);
                }
            }

            a {
                text-align: center;
                text-decoration: none;
                color: #808080;
            }

            display: flex;
            justify-content: space-evenly;


        }
    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (150/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    // 底部按钮


}
</style>